<template>
  <div class="add_hospital_page">
    <div class="nav_bar">
      <div class="back" @click="goBack">
        <span class="el-icon-arrow-left"></span>
        <span>返回</span>
      </div>

      <div class="top_menus">
        <div
          class="menu_cell"
          :class="step == item.id ? 'menu_cell_active' : ''"
          v-for="(item, index) in menus"
          :key="index"
          @click="menuEvent(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <!-- 第一步 基础信息 开始 -->
    <div class="content">
      <el-form
        ref="addForm"
        :model="addForm"
        class="add_form"
        :rules="addFormRules"
        size="small"
        :label-width="labelWidth"
      >
        <el-form-item label="医生名称：" prop="doctorName">
          <el-input v-model="addForm.doctorName" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="医生类型：" prop="doctorType">
          <el-radio-group v-model="addForm.doctorType">
            <el-radio :label="1">矫正</el-radio>
            <el-radio :label="2">种植</el-radio>
            <el-radio :label="3">全科</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="性别：" prop="gender">
          <el-radio-group v-model="addForm.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="医生图片：" class="long_form_item">
          <ImageUpload
            v-model="addForm.doctorAvatarUrl"
            tip="图片尺寸1:1,大小在1M以内"
          ></ImageUpload>
        </el-form-item>
        <el-form-item label="医生标签：">
          <div class="label_box">
            <el-input type="text" v-model="tag" class="a_input" />
            <el-button
              type="primary"
              class="btn"
              :disabled="!tag"
              @click="addTag()"
              >添加</el-button
            >
          </div>
          <div class="tag_list">
            <div
              v-for="(item, index) in addForm.doctorTags || []"
              :key="`tag_${index}`"
            >
              <el-tag size="medium" closable @close="closeTag(item)">{{
                item
              }}</el-tag>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="坐诊医院：" prop="hospitalId">
          <div class="hosp_box">
            <el-input v-model="hospForm.hospitalName" class="a_input" />
            <area-select v-model="hospForm.area" @change="onProvinceChange" />
            <el-input v-model="hospForm.address" class="a_input" />
            <el-button
              type="primary"
              class="btn"
              @click="searchMap"
              :disabled="
                !hospForm.province ||
                !hospForm.city ||
                !hospForm.district ||
                !hospForm.address
              "
              >解析地址</el-button
            >
            <el-button type="primary" class="btn" @click="addHospital()"
              >添加</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="" prop="" class="no_margin_item">
          <address-map ref="addressMap" @change="onChange" />
        </el-form-item>
        <el-form-item label="" prop="" class="no_margin_item">
          <div class="hosp_list">
            <div
              class="hosp_wrap"
              v-for="(item, index) in addForm.hospitalList || []"
              :key="`hosp_${index}`"
            >
              <div class="hosp">
                <div class="hosp_content">
                  <div class="name">{{ item.hospitalName }}</div>
                  <div class="address">
                    {{
                      item.province + item.city + item.district + item.address
                    }}
                  </div>
                </div>
                <div class="close" @click="removeHospital(item)">
                  <i class="el-icon-close"></i>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="学历：" class="long_form_item">
          <WangEditor v-model="addForm.education"></WangEditor>
        </el-form-item>
        <el-form-item label="执业经历：" class="long_form_item">
          <WangEditor v-model="addForm.practiceExperience"></WangEditor>
        </el-form-item>
        <el-form-item label="职称：" class="long_form_item">
          <WangEditor v-model="addForm.professionalTitle"></WangEditor>
        </el-form-item>
        <el-form-item label="学术研究：" class="long_form_item">
          <WangEditor v-model="addForm.researchInterests"></WangEditor>
        </el-form-item>
        <el-form-item label="社会任职：" class="long_form_item">
          <WangEditor v-model="addForm.socialPositions"></WangEditor>
        </el-form-item>
        <el-form-item label="矫正技术：" class="long_form_item">
          <WangEditor v-model="addForm.orthodonticTechnique"></WangEditor>
        </el-form-item>
        <el-form-item label="关联城市：" prop="cityId">
          <el-select v-model="addForm.cityId" filterable>
            <el-option
              v-for="(item, index) in cityList"
              :key="`city_${index}`"
              :label="item.cityName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序时间：" class="long_form_item" prop="sortTime">
          <el-date-picker
            v-model="addForm.sortTime"
            type="datetime"
            class="a_input"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="是否上架："
          class="long_form_item"
          prop="isPublished"
        >
          <el-radio-group v-model="addForm.isPublished">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="是否搜索热门："
          class="long_form_item"
          prop="isFeatured"
        >
          <el-radio-group v-model="addForm.isFeatured">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="saveInfo()">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一步 基础信息 end -->
  </div>
</template>
  <script>
import ImageUpload from "@/components/upload/upload.vue";
import WangEditor from "@/components/wangEditor/index.vue";
import AreaSelect from "@/components/province/index.vue";
import AddressMap from "@/components/map";
import { deepClone, showToast } from "@/common/util";
import {
  ADD_DOCTOR_INFO,
  UPDATE_DOCTOR_INFO,
  GET_DOCTOR_INFO,
  GET_CITY_LIST,
} from "@/http/interface";
export default {
  components: {
    ImageUpload,
    WangEditor,
    AreaSelect,
    AddressMap,
  },
  data() {
    return {
      menus: [{ name: "基础信息", id: 1 }],
      step: 1,
      addForm: {},
      cerForm: {},
      labelWidth: "120px",
      addFormRules: {
        doctorName: [
          { required: true, message: "请输入医生名称", trigger: "blur" },
        ],
        doctorType: [
          { required: true, message: "请选择医生类型", trigger: "change" },
        ],
        // doctorTags: [
        //   { required: true, message: "请添加医生标签", trigger: "change" },
        // ],
        cityId: [
          { required: true, message: "请选择关联城市", trigger: "change" },
        ],
        sortTime: [
          { required: true, message: "请选择排序时间", trigger: "change" },
        ],
        isPublished: [
          { required: true, message: "请选择是否上架", trigger: "change" },
        ],
        isFeatured: [
          { required: true, message: "请选择是否首页", trigger: "change" },
        ],
      },
      loading: false,
      tag: "",
      hospForm: {},
      cityList: [],
    };
  },
  created() {
    let query = this.$route.query;
    if (query.id) {
      this.getInfo(query.id);
    }
    this.getCity();
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.addForm);
      let params = { ...o };

      // 医生图片
      if (o.doctorAvatarUrl && o.doctorAvatarUrl.length) {
        params.doctorAvatarUrl = o.doctorAvatarUrl.toString();
      } else {
        params.doctorAvatarUrl = "";
      }

      if (o.doctorTags && o.doctorTags.length) {
        params.doctorTags = o.doctorTags.toString();
      } else {
        params.doctorTags = "";
      }

      return params;
    },

    // 保存数据
    saveInfo() {
      let _this = this;
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        console.log(oParams);
        let callBack = ADD_DOCTOR_INFO;
        let msg = "新增成功";
        console.log(oParams);
        _this.loading = true;

        // 编辑
        if (oParams.id) {
          callBack = UPDATE_DOCTOR_INFO;
          msg = "编辑成功";
        }

        callBack(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: msg,
              type: "success",
            });
            _this.goBack();
          }
        });
      });
    },

    // 获取医生详情
    async getInfo(id) {
      let res = await GET_DOCTOR_INFO({ id: id });
      let obj = res.data || {};
      let addForm = { ...obj };

      // 医生图片
      if (addForm.doctorAvatarUrl) {
        addForm.doctorAvatarUrl = addForm.doctorAvatarUrl.split(",");
      }

      if (addForm.doctorTags) {
        addForm.doctorTags = addForm.doctorTags.split(",");
      }
      console.log(addForm.titleId);
      this.addForm = addForm;
    },

    // 添加标签
    addTag() {
      let txt = this.tag;
      let m = this.addForm.doctorTags || [];
      let idx = m.findIndex((k) => k == txt);
      if (idx >= 0) {
        showToast({
          message: "该标签已存在",
        });
        return false;
      }
      m.push(txt);
      this.$set(this.addForm, "doctorTags", m);
      this.tag = "";
    },

    // 删除医生标签
    closeTag(row) {
      let m = this.addForm.doctorTags || [];
      let list = m.filter((k) => k != row);
      this.$set(this.addForm, "doctorTags", list);
    },

    // 搜索地图
    searchMap() {
      let o = this.hospForm;
      let keywords = o.province + o.city + o.district + o.address;
      if (keywords) {
        this.$refs.addressMap.mapSearchEvent(keywords);
      }
    },

    // 监听省市区
    onProvinceChange(e) {
      this.$set(this.hospForm, "province", e[0]);
      this.$set(this.hospForm, "city", e[1]);
      this.$set(this.hospForm, "district", e[2]);
    },

    // 添加坐诊医院
    addHospital() {
      let o = this.hospForm || {};
      console.log(o);
      let m = this.addForm.hospitalList || [];
      console.log(m);
      if (!o.longitude) {
        showToast({
          message: "请先解析地址",
        });
        return false;
      }

      let idx = m.findIndex((k) => k.hospitalName == o.hospitalName);
      if (idx >= 0) {
        showToast({
          message: "该医院名称已存在",
        });
        return false;
      }

      m.push(o);
      this.$set(this.addForm, "hospitalList", m);
      this.hospForm = {};
      console.log(this.addForm);
    },

    // 监听地图变化
    onChange(e) {
      this.$set(this.hospForm, "longitude", e.lng);
      this.$set(this.hospForm, "latitude", e.lat);
    },

    // 获取城市
    getCity() {
      let params = {};
      params.current = 1;
      params.size = 10000;
      GET_CITY_LIST(params).then((res) => {
        let _obj = res.data || {};
        this.cityList = _obj.records || [];
      });
    },

    // 删除坐诊医院
    removeHospital(row) {
      let list = this.addForm.hospitalList || [];
      let n = list.filter((k) => k.hospitalName != row.hospitalName);
      this.$set(this.addForm, "hospitalList", n);
    },
  },
};
</script>
<style lang="scss">
.el-select-dropdown {
  z-index: 11000 !important;
}
</style>
<style lang="scss" scoped>
@import "@/assets/style/addHospital.scss";
.a_input {
  width: 240px;
}
.hosp_box {
  display: flex;
  align-items: center;
  .a_input {
    width: 200px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .a_input:first-child {
    margin-left: 0px;
  }
}
.hosp_list {
  width: auo;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  .hosp_wrap {
    flex: 1;
  }
  .hosp {
    display: inline-flex;
    align-items: center;
    background: #ecf5ff;
    border-radius: 8px;
    border: 1px soid #d9ecff;
    color: #409eff;
    padding: 10px 14px;
    margin: 0 0 10px 0;
    .name {
      font-size: 14px;
      line-height: 1.5;
    }
    .address {
      font-size: 12px;
      color: #999;
      line-height: 1.5;
    }
    .close {
      flex-shrink: 0;
      margin-left: 20px;
    }
  }
}
.no_margin_item {
  margin-bottom: 0;
}
</style>
<style lang="scss">
.el-popper {
  z-index: 11000 !important;
}
</style>